<template>
  <ul class="menu">
    <li class="menu_list" v-for="(item, index) in list" :key="index" :class="currentHref == item.viewPath ? 'active' : ''">
      <a class="menu_list_link" :href="item.viewPath || 'javascript:;'">
        <el-image class="menu_list_link_icon" :src="item.iconHover" v-if="currentHref == item.viewPath"></el-image>
        <el-image class="menu_list_link_icon" :src="item.icon" v-else></el-image>
        <span class="menu_list_link_name">{{ item.name || '' }}</span>
      </a>
    </li>
  </ul>
</template>

<script setup>
defineProps({
  list: {
    type: Array,
    default: [
      {
        name: "机构统计",
        viewPath: "/admin",
        icon: "https://static.dzyxzx.cn/jkbpc/tongji.png",
        iconHover: "https://static.dzyxzx.cn/jkbpc/tongji1.png",
      },
      {
        name: "机构信息",
        viewPath: "/admin/information",
        icon: "https://static.dzyxzx.cn/jkbpc/jigou.png",
        iconHover: "https://static.dzyxzx.cn/jkbpc/jigou1.png",
      },
      {
        name: "角色管理",
        viewPath: "/admin/role",
        icon: "https://static.dzyxzx.cn/jkbpc/juese.png",
        iconHover: "https://static.dzyxzx.cn/jkbpc/juese1.png",
      },
      {
        name: "管理人员",
        viewPath: "/admin/personnel",
        icon: "https://static.dzyxzx.cn/jkbpc/guanliyuan.png",
        iconHover: "https://static.dzyxzx.cn/jkbpc/guanliyuan1.png",
      },
      {
        name: "教师管理",
        viewPath: "/admin/teacher",
        icon: "https://static.dzyxzx.cn/jkbpc/jiaoshi.png",
        iconHover: "https://static.dzyxzx.cn/jkbpc/jiaoshi1.png",
      },
      {
        name: "课程管理",
        viewPath: "/admin/curriculum",
        icon: "https://static.dzyxzx.cn/jkbpc/kecheng.png",
        iconHover: "https://static.dzyxzx.cn/jkbpc/kecheng1.png",
      },
      {
        name: "班级管理",
        viewPath: "/admin/class",
        icon: "https://static.dzyxzx.cn/jkbpc/banji.png",
        iconHover: "https://static.dzyxzx.cn/jkbpc/banji1.png",
      },
      {
        name: "学员管理",
        viewPath: "/admin/student",
        icon: "https://static.dzyxzx.cn/jkbpc/xueyuan.png",
        iconHover: "https://static.dzyxzx.cn/jkbpc/xueyuan1.png",
      },
      {
        name: "证书管理",
        viewPath: "/admin/certificate",
        icon: "https://static.dzyxzx.cn/jkbpc/zhengshu.png",
        iconHover: "https://static.dzyxzx.cn/jkbpc/zhengshu1.png",
      },
      {
        name: "留言管理",
        viewPath: "/admin/message",
        icon: "https://static.dzyxzx.cn/jkbpc/liuyan.png",
        iconHover: "https://static.dzyxzx.cn/jkbpc/liuyan1.png",
      },
    ]
  },
  currentHref: {
    type: String,
    default: ''
  }
});
</script>

<style lang="less" scoped>
.menu {
  width: 250px;
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid #eeeeee;
  padding: 24px 0;

  &_list {
    height: 40px;
    line-height: 40px;
    padding-left: 56px;
    position: relative;

    &_link {
      width: 100%;
      display: flex;
      align-items: center;

      &_icon {
        width: 16px;
        height: 16px;
        margin-right: 16px;
      }

      &_name {
        font-size: 16px;
        font-weight: bold;
        color: #333333;
      }
    }

    &.active {
      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 4px;
        height: 16px;
        background: #2c6eff;
      }

      .menu_list_link_name {
        color: #2c6eff;
      }
    }
  }
}
</style>
